<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #f60;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
		<span class="oday">15</span>天
        <span class="hour">01</span>小时
        <span class="minute">02</span>分钟
        <span class="second">33</span>秒
    </div>
	<script type="text/javascript">
		//获取元素对象
		var oday = document.querySelector('.oday');
		var hour = document.querySelector('.hour');
		var minute = document.querySelector('.minute');
		var second = document.querySelector('.second');
		var endtime = '2022-05-01 17:20:10';
		var date = countDown();
		// alert(date);
		//加定时器
		setInterval(countDown,1000);
		function countDown(){
			//获取当前时间的秒数
			var date = + new Date();//毫秒数
			//获取输入值的毫秒数
			var input = new Date(endtime);
			//差集,得到秒数
			var diff = (input-date)/1000;
			
			console.log(diff);//1840135.162
			var day = parseInt(diff/ 60/60 /24);
			day = day<10 ? '0'+day:day;
			oday.innerHTML = day;
			var h = parseInt(diff/ 60/60 %24);
			h = h<10?'0'+h:h;
			hour.innerHTML = h;
			var i = parseInt(diff /60 %60 );
			i = i<10?'0'+i:i;
			minute.innerHTML = i;
			var s = parseInt(diff%60);
			s = s<10 ? '0'+s :s;
			second.innerHTML = s;	
		}
	</script>
</body>

</html>